<template>
  <div class="back-style">
      <el-affix :offset="0">
        <headmenu></headmenu>
      </el-affix>
      <div class="main-style">
        <transition :name="transitionName">
          <router-view style="margin-bottom: 20px"></router-view>
        </transition>
      </div>
      <ShowFooter></ShowFooter>
  </div>

</template>

<script>
import headmenu from './components/header'
import ShowFooter from './components/ShowFooter'


export default {
  name: 'index',
  components:{headmenu,ShowFooter},
  data(){
    return{
      transitionName:"fold-left",
    }
  },
  methods:{
    info() {
      // console.log(this.$router.currentRoute.value.name[0])
      alert(this.$router.currentRoute.value)
    },
  },
  watch: {
    '$route': function(to,from){
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }

}
</script>

<style scoped>

@keyframes fold-left-in {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fold-left-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.fold-left-enter-active {
  animation-name: fold-left-in;
  animation-duration: .3s;
}

.fold-left-leave-active {
  animation-name: fold-left-out;
  animation-duration: .3s;
}

.fold-right-enter-active {
  animation-name: fold-right-in;
  animation-duration: .3s;
}

.fold-right-leave-active {
  animation-name: fold-right-out;
  animation-duration: .3s;
}

.main-style{
  position:relative;
  width: 100%;
}

.back-style{
  background:#F5F5F5;
}
</style>
